<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{{title}}</title>

    <!-- https://getmobicss.com/docs/container.html -->
    <link rel="stylesheet" href="https://unpkg.com/mobi.css/dist/mobi.min.css" />  
    <link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}" />

</head>
<body>
    <h3 id="title">{{title}}</h1>
    <p id="url_title" hidden>{{url_title}}</p>
    <div class="flex-center">
        <div class="container-fluid">
          <div class="flex-left flex-wrap units-gap-big">
            <div class="unit-1-4 unit-1-on-mobile">

                <form class="form" onsubmit="getEntry();return false">
                    <input id="input" type="search"     />
                    <input class="btn" type="submit" value="Search"/>
                    <span class="validity"></span>
                </form>
            </div>
            <div class="unit unit-1-on-mobile">
                <div id="result-area"></div>
            </div>
            <div class="unit-1-4 hide-on-mobile">
                <div>
                    {{description|safe}}
                </div>
            </div>
          </div>
        </div>
      </div>
      
    
    
    <script>
        // var input = document.querySelector("#input")
        // var button = document.querySelector("#button")
        var url_title = document.querySelector("#url_title").innerText
        const getEntry = function(){
            let hwd = input.value;

            let result_entry = document.createElement('iframe');
            result_entry.class = "result-entry scroll-view";
            result_entry.style="width:100%; min-height: 90vh;";
            result_entry.src = hwd; 

            let result_area = document.querySelector("#result-area");
            result_area.innerHTML = "";  // remove old content
            result_area.appendChild(result_entry);
        }
        // button.addEventListener('click',
        //     function()
        //     {
        //         var hwd = input.value
        //         window.location = hwd
        //         }
        //     )
    </script>
</body>

</html>
